<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>车辆任务管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .search-container {
            margin: 30px 10px 20px 10px;
        }
        .search-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
        .search-controls {
            display: flex;
            align-items: center;
        }
        .calendar-buttons {
            display: flex;
            align-items: center;
        }

        /*字体样式*/
        .current-date-display {
            font-size: 18px;
            font-weight: bold;
            margin-left: 15px;
            margin-top: 5px;
        }

        /*日历总体表格样式*/
        .calendar-body {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        /*星期表格样式*/
        .calendar-weekday {
            text-align: center;
            padding: 10px;
            background-color: #f2f2f2;
            font-weight: bold;
        }

        /*日期表格样式*/
        .calendar-day {
            height: 100px;
            border: 1px solid #eee;
            padding: 5px;
            overflow: auto;
        }

        /*鼠标提示*/
        .calendar-day:hover {
            background-color: #f9f9f9;
            cursor: pointer;
        }

        /*今天日期的背景色*/
        .calendar-day.today {
            background-color: #e6f7ff;
        }

        /*非当前月份日期的背景色*/
        .calendar-day.other-month {
            color: #ccc;
        }

        /*有任务的日期背景色*/
        .calendar-day.has-task {
            background-color: #f0f9eb;
        }

        /*任务项样式*/
        .task-item {
            font-size: 12px;
            padding: 2px 5px;
            margin-bottom: 2px;
            background-color: #e1f3d8;
            border-radius: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!-- 搜索表单 -->
        <div class="search-container">
            <div class="search-row">
                <!-- 搜索控件 -->
                <div class="search-controls">
                    <form class="layui-form layui-form-pane" action="" style="margin: 0">
                        <div class="layui-form-item" style="margin: 0; display: flex; align-items: center;">
                            <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                                <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">年份</label>
                                <div class="layui-input-inline" style="width:100px;">
                                    <select name="year" class="layui-input" lay-filter="year-select"></select>
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                                <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">月份</label>
                                <div class="layui-input-inline" style="width:80px;">
                                    <select name="month" class="layui-input" lay-filter="month-select">
                                        <option value="1">1月</option>
                                        <option value="2">2月</option>
                                        <option value="3">3月</option>
                                        <option value="4">4月</option>
                                        <option value="5">5月</option>
                                        <option value="6">6月</option>
                                        <option value="7">7月</option>
                                        <option value="8">8月</option>
                                        <option value="9">9月</option>
                                        <option value="10">10月</option>
                                        <option value="11">11月</option>
                                        <option value="12">12月</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 日历导航按钮 -->
                <div class="calendar-buttons">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" id="prev-month" style="border-radius:4px; margin-right:5px;">
                        <i class="layui-icon">&#xe65a;</i>上个月
                    </button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" id="today" style="border-radius:4px; margin-right:5px;">
                        <i class="layui-icon"></i>今天
                    </button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" id="next-month" style="border-radius:4px; margin-right:5px;">
                        <i class="layui-icon">&#xe65b;</i>下个月
                    </button>
                </div>
            </div>

            <!-- 当前年月显示 - 放在搜索行下方 -->
            <div class="current-date-display" id="calendar-title"></div>
        </div>

        <!-- 日历星期标题 -->
        <div class="calendar-body" id="calendar-weekdays">
            <div class="calendar-weekday">周日</div>
            <div class="calendar-weekday">周一</div>
            <div class="calendar-weekday">周二</div>
            <div class="calendar-weekday">周三</div>
            <div class="calendar-weekday">周四</div>
            <div class="calendar-weekday">周五</div>
            <div class="calendar-weekday">周六</div>
        </div>

        <!-- 日历日期格子 -->
        <div class="calendar-body" id="calendar-days"></div>

        <!-- 任务详情弹窗 -->
        <div id="task-detail" style="display: none; padding: 20px;">
            <div id="task-content">
                <div style="text-align: center; padding: 20px;" id="no-task">
                    <i class="layui-icon" style="font-size: 50px; color: #ccc;">&#xe69c;</i>
                    <p style="margin-top: 10px; font-size: 16px;">该日期没有任务</p>
                </div>
                <table class="layui-hide" id="task-table" lay-filter="taskTableFilter"></table>
            </div>
        </div>
    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'layer', 'laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            laydate = layui.laydate;

        var currentDate = new Date();
        var currentYear = currentDate.getFullYear();
        var currentMonth = currentDate.getMonth() + 1;
        var currentDay = currentDate.getDate();

        // 初始化年份选择器
        function initYearSelect() {
            var yearSelect = $('select[name="year"]');
            yearSelect.empty();

            // 过去5年和未来5年
            for (var i = currentYear - 5; i <= currentYear + 5; i++) {
                yearSelect.append('<option value="' + i + '">' + i + '年</option>');
            }

            // 设置当前年份为选中
            yearSelect.val(currentYear);
            form.render('select');
        }

        // 初始化月份选择器
        function initMonthSelect() {
            $('select[name="month"]').val(currentMonth);
            form.render('select');
        }

        // 渲染日历
        function renderCalendar(year, month) {
            // 设置标题
            $('#calendar-title').text(year + '年' + month + '月');

            // 获取当月第一天和最后一天
            var firstDay = new Date(year, month - 1, 1);
            var lastDay = new Date(year, month, 0);

            // 获取当月天数
            var daysInMonth = lastDay.getDate();

            // 获取当月第一天是星期几
            var firstDayOfWeek = firstDay.getDay();

            // 清空日历
            $('#calendar-days').empty();

            // 添加上个月的日期
            var prevMonthLastDay = new Date(year, month - 1, 0).getDate();
            for (var i = firstDayOfWeek - 1; i >= 0; i--) {
                var dayElement = $('<div class="calendar-day other-month">' + (prevMonthLastDay - i) + '</div>');
                $('#calendar-days').append(dayElement);
            }

            // 添加当月的日期
            for (var i = 1; i <= daysInMonth; i++) {
                var dateStr = year + '-' + (month < 10 ? '0' + month : month) + '-' + (i < 10 ? '0' + i : i);
                var dayElement = $('<div class="calendar-day" data-date="' + dateStr + '">' +
                    '<div class="day-number">' + i + '</div>' +
                    '</div>');

                // 标记今天
                if (year === currentYear && month === currentMonth && i === currentDay) {
                    dayElement.addClass('today');
                }

                $('#calendar-days').append(dayElement);
            }

            // 添加下个月的日期
            var nextMonthDays = 42 - firstDayOfWeek - daysInMonth; // 6行x7天=42格
            for (var i = 1; i <= nextMonthDays; i++) {
                var dayElement = $('<div class="calendar-day other-month">' + i + '</div>');
                $('#calendar-days').append(dayElement);
            }

            // 加载当月任务数据
            loadMonthTasks(year, month);
        }

        // 加载当月任务数据
        function loadMonthTasks(year, month) {
            $.get('/vehicleTask/queryPage', {
                year: year,
                month: month
            }, function(res) {
                if (res.code === 0) {
                    var tasks = res.data.list;
                    var taskDates = {};

                    // 按日期分组任务
                    tasks.forEach(function(task) {
                        if (!taskDates[task.taskDate]) {
                            taskDates[task.taskDate] = [];
                        }
                        taskDates[task.taskDate].push(task);
                    });

                    // 标记有任务的日期
                    for (var date in taskDates) {
                        $('.calendar-day[data-date="' + date + '"]').addClass('has-task');

                        // 添加任务简要信息
                        var tasksHtml = '';
                        taskDates[date].forEach(function(task) {
                            tasksHtml += '<div class="task-item" title="' + task.taskName + '">' +
                                task.vehicleLicense + ': ' + task.taskName +
                                '</div>';
                        });

                        $('.calendar-day[data-date="' + date + '"]').append(tasksHtml);
                    }
                }
            });
        }

        // 显示任务详情
        function showTaskDetail(date) {
            // 先销毁之前的表格实例（如果存在）
            var ins = table.cache['task-table'];
            if (ins) {
                table.reload('task-table', {
                    data: [] // 清空数据
                });
            }

            $.get('/vehicleTask/queryByDate', {
                date: date
            }, function(res) {
                var taskDetail = $('#task-detail');
                var noTask = $('#no-task');
                var taskTable = $('#task-table');

                // 每次先隐藏表格，显示无任务提示
                if (res.code === 0 && res.data.length > 0) {
                    noTask.hide();
                    taskTable.show();

                    // 渲染表格
                    table.render({
                        elem: '#task-table',
                        id: 'task-table', // 指定唯一ID
                        data: res.data,
                        cols: [[
                            {field: 'vehicleLicense', title: '车牌号', width: 100},
                            {field: 'vehicleType', title: '车辆类型', width: 100},
                            {field: 'userName', title: '员工', width: 100},
                            {field: 'taskName', title: '任务名称', width: 150},
                            {field: 'startTime', title: '开始时间', width: 150},
                            {field: 'endTime', title: '结束时间', width: 150},
                            {field: 'taskDescription', title: '任务描述'}
                        ]],
                        page: true
                    });
                }

                layer.open({
                    title: date + ' 任务详情',
                    type: 1,
                    area: ['80%', '80%'],
                    content: taskDetail,
                    end: function() {
                        // 弹窗关闭时销毁表格实例
                        table.reload('task-table', {
                            data: []
                        });
                    }
                });
            });
        }

        // 初始化
        initYearSelect();
        initMonthSelect();
        renderCalendar(currentYear, currentMonth);

        // 年份选择变化
        form.on('select(year-select)', function(data) {
            currentYear = parseInt(data.value);
            renderCalendar(currentYear, currentMonth);
        });

        // 月份选择变化
        form.on('select(month-select)', function(data) {
            currentMonth = parseInt(data.value);
            renderCalendar(currentYear, currentMonth);
        });

        // 上个月按钮
        $('#prev-month').click(function() {
            currentMonth--;
            if (currentMonth < 1) {
                currentMonth = 12;
                currentYear--;
            }
            $('select[name="year"]').val(currentYear);
            $('select[name="month"]').val(currentMonth);
            form.render('select');
            renderCalendar(currentYear, currentMonth);
        });

        // 下个月按钮
        $('#next-month').click(function() {
            currentMonth++;
            if (currentMonth > 12) {
                currentMonth = 1;
                currentYear++;
            }
            $('select[name="year"]').val(currentYear);
            $('select[name="month"]').val(currentMonth);
            form.render('select');
            renderCalendar(currentYear, currentMonth);
        });

        // 今天按钮
        $('#today').click(function() {
            currentDate = new Date();
            currentYear = currentDate.getFullYear();
            currentMonth = currentDate.getMonth() + 1;
            currentDay = currentDate.getDate();

            $('select[name="year"]').val(currentYear);
            $('select[name="month"]').val(currentMonth);
            form.render('select');
            renderCalendar(currentYear, currentMonth);
        });

        // 点击日期
        $(document).on('click', '.calendar-day:not(.other-month)', function() {
            var date = $(this).data('date');
            showTaskDetail(date);
        });
    });
</script>
</body>
</html>